import { useState } from "react";
import { motion } from "framer-motion";

const products = [
  {
    name: "晨夕盈12号C",
    type: "日开",
    rate1m: "2.11%",
    rateTotal: "3.03%",
    target: "新客",
    detailType: "image",
    detailUrl: "../1.jpg",
  },
  {
    name: "聚财宝21号A",
    type: "月开",
    rate1m: "2.35%",
    rateTotal: "3.12%",
    target: "大众",
    detailType: "link",
    detailUrl: "https://mdp.bhypt.cbhb.com.cn/Ali-prd-mdp-h5/offline/74d1791d-3969-4feb-86d5-67d129f42f8c/bhprod/41000000/index.html?ruleId=001&reqParam=%7B%22contentId%22:%2225f7c031-f826-4322-a026-e1954e699590%22%7D#/",
  },
  {
    name: "稳健盈3号B",
    type: "季开",
    rate1m: "2.45%",
    rateTotal: "3.25%",
    target: "高净值",
    detailType: "image",
    detailUrl: "../1.jpg",
  },
  {
    name: "创富宝9号",
    type: "半年开",
    rate1m: "2.68%",
    rateTotal: "3.45%",
    target: "大众",
    detailType: "link",
    detailUrl: "https://mdp.bhypt.cbhb.com.cn/Ali-prd-mdp-h5/offline/74d1791d-3969-4feb-86d5-67d129f42f8c/bhprod/41000000/index.html?ruleId=001&reqParam=%7B%22contentId%22:%2225f7c031-f826-4322-a026-e1954e699590%22%7D#/",
  },
  {
    name: "安心盈尊享版",
    type: "日开",
    rate1m: "2.05%",
    rateTotal: "2.95%",
    target: "新客",
    detailType: "image",
    detailUrl: "../1.jpg",
  },
];

export default function App() {
  const [selected, setSelected] = useState(null);

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <h1 className="text-2xl font-bold text-center mb-6 text-indigo-700">
        重点理财产品
      </h1>

      <div className="grid gap-4">
        {products.map((p, idx) => (
          <motion.div
            key={idx}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: idx * 0.1 }}
          >
            <div className="rounded-2xl shadow-md hover:shadow-lg transition bg-white p-4 flex flex-col space-y-2">
              <button
                className="text-lg font-semibold text-indigo-600 text-left"
                onClick={() => setSelected(p)}
              >
                {p.name}
              </button>
              <div className="flex justify-between text-sm text-gray-600">
                <span>类型：{p.type}</span>
                <span>客群：{p.target}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-green-600">
                  近1月收益率：{p.rate1m}
                </span>
                <span className="text-blue-600">
                  成立以来：{p.rateTotal}
                </span>
              </div>
            </div>
          </motion.div>
        ))}
      </div>

      {selected && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-2xl shadow-xl w-11/12 max-w-md p-4 relative">
            <button
              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
              onClick={() => setSelected(null)}
            >
              ✕
            </button>

            <h2 className="text-xl font-bold text-indigo-700 mb-3">
              {selected.name} 详情
            </h2>

            {selected.detailType === "image" ? (
              <img
                src={selected.detailUrl}
                alt="详情图"
                className="rounded-xl w-full"
              />
            ) : (
              <a
                href={selected.detailUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="text-indigo-600 underline"
              >
                点击查看详情
              </a>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
